import React, { useMemo } from 'react';
import { RecordStyle } from './styledList';
import Icon from '@/components/icon/Icon'
import Label from  '@/components/myComponents/label/Label'
const Record = (props) => {
    const { year, date, value, unit, standard, changeClick, delClick } = props;
    const getLev = useMemo(() => { 
        let [max, min] = [Math.max.call(null, ...standard), Math.min.call(null, ...standard)];
        if (value>=min&&value<=max) return '正常';
        else if(value>max) return '超标';
        else if(value<min)  return '偏低';
    }, [value, standard])
    return (
        <RecordStyle>
            <div className="left">
                <p className="date">{date}</p>
                <p className="year">{year}</p>
            </div>
            <div className="right">
                <span className="value">{value}<span className='unit'>{unit}</span></span>
                <Label
                    size='.12rem'
                    color={getLev === '正常' ? '#3ed59f' : '#FA7468'}
                    bgcolor={getLev === '正常' ? '#d4f6ea' : '#FDDB78'}
                    title={getLev}
                ></Label>
                <Icon
                    name='editLine'
                    bgColor='#eaf3fe'
                    color='#2984F8'
                    padding='.12rem'
                    click={changeClick}
                ></Icon>
                <Icon
                    name='deleteBinLine'
                    bgColor='#eaf3fe'
                    color='#2984F8'
                    padding='.12rem'
                    click={delClick}
                ></Icon>

            </div>
        </RecordStyle>
    );
}

export default Record;
